.pf-c-touchspin {
  // unit
  --pf-c-touchspin__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);

  // icon
  --pf-c-touchspin__icon--FontSize: var(--pf-global--FontSize--xs);

  // form control
  --pf-c-touchspin--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2); // element's padding
  --pf-c-touchspin--c-form-control--width-chars: 4;
  --pf-c-touchspin--c-form-control--Width: calc(var(--pf-c-touchspin--c-form-control--width-base) + var(--pf-c-touchspin--c-form-control--width-chars) * 1ch);

  display: inline-flex;
  align-items: center;

  .pf-c-form-control {
    display: inline-flex;
    width: var(--pf-c-touchspin--c-form-control--Width);
    text-align: right;
  }
}

.pf-c-input-group + .pf-c-touchspin__unit,
.pf-c-touchspin__unit + .pf-c-input-group {
  margin-left: var(--pf-c-touchspin__unit--c-input-group--MarginLeft);
}

.pf-c-touchspin__icon {
  font-size: var(--pf-c-touchspin__icon--FontSize);
}
